<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Linux Terminal</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="terminal-container">
    <div class="terminal-header">
        <div class="terminal-title">Web Linux Terminal</div>
        <div class="terminal-controls">
            <button class="control minimize"></button>
            <button class="control maximize"></button>
            <button class="control close"></button>
        </div>
    </div>
    <div class="terminal-body" id="terminal">
        <div class="welcome-message">
            Welcome to Web Linux Terminal Emulator<br>
            Type 'help' to see available commands<br><br>
        </div>
        <div th:each="cmd : ${commandHistory}">
            <div class="command-line">
                <span class="prompt">user@web-terminal:<span th:text="${cmd.currentDirectory}">~</span>$</span>
                <span th:text="${cmd.command}">command</span>
            </div>
            <div class="command-output" th:if="${cmd.output != null and !cmd.output.isEmpty()}" th:text="${cmd.output}">
                command output
            </div>
        </div>
        <div class="command-line">
            <span class="prompt">user@web-terminal:<span th:text="${currentDirectory}">~</span>$</span>
            <input type="text" class="command-input" id="commandInput" autofocus>
        </div>
    </div>
</div>

<script src="/js/terminal.js"></script>
</body>
</html>